// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Cube from 'cube-ui'
import { debounce } from 'throttle-debounce'
Vue.use(Cube)
Vue.use(ElementUI)
Vue.use(Vuex)
Vue.config.productionTip = false

const activateTooltip = debounce(50, tooltip => tooltip.handleShowPopper())
const store = new Vuex.Store({
  state: {
    toolTip: null,
    feeCompany: {
      isProfessionalEdition: 1,
      feeType: 3
    }
  },
  mutations: {
    MOUNT_TOOL_TIP_BOX (state, instance) {
      state.toolTipBox = instance
    },
    MOUNT_TOOL_TIP (state, node) {
      state.toolTip = node
    },
    // 初始化
    INIT_TOOL_TIP (state, obj) {
      console.log(state, '----------------state---------------')
      console.log(obj, '----------------obj---------------')
      state.toolTip.referenceElm = obj.node
      // 先消掉之前的
      state.toolTip.$refs.popper && (state.toolTip.$refs.popper.style.display = 'none')
      state.toolTip.doDestroy()
      // 设置组件内的条件变量为true，否则无法调用handleClosePopper
      state.toolTip.setExpectedState(true)
      // 展示新的tool-tip
      // state.toolTip.activateTooltip(state.toolTip)
      activateTooltip(state.toolTip)
      // 填入内容
      state.toolTipBox.toolTipContent = obj.content
      // 设置位置
      state.toolTipBox.toolTipPlacement = obj.placement
    },
    // 关闭
    CLOSE_TOOL_TIP (state) {
      state.toolTip.setExpectedState(false)
      state.toolTip.handleClosePopper()
    }
  },
  getters: {
    feeType: state => {
      return state.feeCompany && state.feeCompany.feeType
    },
    isProfessionalEdition: (state, getter) => {
      return getter.feeType !== 3 ? (state.feeCompany && state.feeCompany.isProfessionalEdition) : undefined
    }
  }
})

let watcher = null
Vue.directive('feeHide', {
  bind: function (el, binding, vnode) {
    console.log('-------bind-------')
  },
  inserted: function (el, binding) {
    console.log(binding, '---------------inserted-binding--------------')

    let { value } = binding
    watcher = store.watch((state, getter) => {
      return getter.isProfessionalEdition
    },
    (val, oldVal) => {
      // val = 0 （标准版大阉割） 1 (高级版小阉割)
      console.log(val, '---------------val------------------')
      if (val === 0) {
        if (value === 3 || value === 1) {
          el.classList.add('fee-hide')
        } else if (value === 2) {
          el.classList.remove('fee-hide')
        }
      } else if (val === 1) {
        if (value === 3 || value === 2) {
          el.classList.add('fee-hide')
        } else if (value === 1) {
          el.classList.remove('fee-hide')
        }
      } else {
        el.classList.remove('fee-hide')
      }
    },
    {
      immediate: true
    })
    console.log(watcher, '---------------inserted-watcher--------------')
  },
  unbind: function () {
    console.log(watcher, '-------unbind-------')
    watcher && watcher()
  }
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'

})
